<template>
  <div>
    <!-- 再次重新认识一下  v-model -->
    <!-- 
      > v-model 双向数据绑定的指令
        M => V  => v-bind(用)
        :title='title'
        :name='name'
        V => M => v-on
      > 场景 : 表单元素  
      > 目的 : 收集数据
     -->
    <h2>Test组件 : {{ name }}</h2>
    <!-- 1. (合) input v-model -->
    <!-- <input type="text" v-model="name" /> -->

    <!-- 2. (分)拆 -->
    <!-- <input type="text" :value="name" @input="name = $event.target.value" /> -->

    <!-- 3. (分)拆  -->
    <!-- <Child :value="name" @input="name = $event"></Child> -->

    <!-- 4. (合)目标任务 -->
    <!-- <Child v-model="name"></Child> -->

    <!-- 5. (合) 改进版本 => 父传子 + 子传父 -->
    <!-- <Child v-model="name" ></Child> -->

    <!-- 6. 可以使用多次的  => 父传子 + 子传父 -->
    <!-- :title.sync='title' -->
    <!-- 6.1 分 -->
    <!-- <Child :name="name" @update="name = $event"></Child> -->
    <!-- 6.2 分 -->
    <!-- <Child :name="name" @update:name="name = $event"></Child> -->
    <!-- 6.3 可以合 -->
    <Child :name.sync="name" :age.sync="age"></Child>
    <!-- 
       发布成为一个组件库
       Child
       属性1 : name 
       <Child :name.sync="name"></Child>
       属性2 : age
       <Child :age.sync="age"></Child>


     -->
  </div>
</template>

<script>
import Child from './Child.vue'
export default {
  components: {
    Child,
  },
  data() {
    return {
      name: 'zs',
      age: 30,
    }
  },
  methods: {},
}
</script>

<style></style>
